<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cool Theme</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6C2BD9',
                        secondary: '#00CFFD',
                        accent: '#FF0080',
                        dark: '#13111C',
                        light: '#E9D5FF'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .glow {
                filter: drop-shadow(0 0 8px currentColor);
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .bg-mesh {
                background-image: radial-gradient(rgba(108, 43, 217, 0.15) 1px, transparent 1px);
                background-size: 20px 20px;
            }
        }
    </style>
</head>
<body class="bg-dark text-light font-inter min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-dark/80 border-b border-primary/20">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="text-2xl font-bold text-gradient bg-gradient-to-r from-primary to-secondary">
            <i class="fa fa-bolt mr-2"></i>Cool<span class="text-accent">Theme</span>
        </div>
        <div class="hidden md:flex space-x-8">
            <a href="#" class="hover:text-secondary transition-colors duration-300">Home</a>
            <a href="#" class="hover:text-secondary transition-colors duration-300">Features</a>
            <a href="#" class="hover:text-secondary transition-colors duration-300">Gallery</a>
            <a href="#" class="hover:text-secondary transition-colors duration-300">Contact</a>
        </div>
        <button class="md:hidden text-2xl">
            <i class="fa fa-bars"></i>
        </button>
    </div>
</nav>

<!-- 英雄区域 -->
<header class="pt-28 pb-20 md:pt-40 md:pb-32 relative overflow-hidden bg-mesh">
    <div class="absolute inset-0 bg-gradient-to-b from-primary/20 to-dark"></div>
    <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-3xl mx-auto text-center">
            <h1 class="text-[clamp(2.5rem,6vw,4.5rem)] font-bold leading-tight mb-6">
                <span class="text-gradient bg-gradient-to-r from-secondary to-accent">Experience</span>
                <span class="block">The Coolest Design</span>
            </h1>
            <p class="text-lg md:text-xl opacity-80 mb-10 max-w-2xl mx-auto">
                这是一个酷炫的网页，oh yeah
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button class="px-8 py-3 bg-gradient-to-r from-primary to-secondary rounded-full font-semibold hover:shadow-lg hover:shadow-primary/20 transition-all duration-300 transform hover:-translate-y-1">
                    <i class="fa fa-rocket mr-2"></i>Get Started
                </button>
                <button class="px-8 py-3 bg-transparent border-2 border-light/30 rounded-full font-semibold hover:border-secondary transition-all duration-300">
                    <i class="fa fa-play-circle mr-2"></i>Watch Demo
                </button>
            </div>
        </div>
    </div>
    <!-- 装饰元素 -->
    <div class="absolute -bottom-20 -left-20 w-60 h-60 bg-primary/30 rounded-full blur-3xl"></div>
    <div class="absolute top-40 -right-20 w-80 h-80 bg-secondary/20 rounded-full blur-3xl"></div>
</header>

<!-- 特性区域 -->
<section class="py-20 relative">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Why It's <span
                    class="text-gradient bg-gradient-to-r from-primary to-accent">Awesome</span></h2>
            <p class="text-lg opacity-80 max-w-2xl mx-auto">Discover the amazing features that make this design stand
                out from the crowd.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- 特性卡片 1 -->
            <div class="bg-dark/50 backdrop-blur-sm p-8 rounded-2xl border border-primary/20 hover:border-primary/40 transition-all duration-300 transform hover:-translate-y-2 group">
                <div class="w-14 h-14 rounded-xl bg-primary/20 flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-colors duration-300">
                    <i class="fa fa-paint-brush text-2xl text-primary glow"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">Stunning Visuals</h3>
                <p class="opacity-75">Experience beautiful gradients, subtle animations, and eye-catching effects that
                    make your website pop.</p>
            </div>

            <!-- 特性卡片 2 -->
            <div class="bg-dark/50 backdrop-blur-sm p-8 rounded-2xl border border-primary/20 hover:border-primary/40 transition-all duration-300 transform hover:-translate-y-2 group">
                <div class="w-14 h-14 rounded-xl bg-secondary/20 flex items-center justify-center mb-6 group-hover:bg-secondary/30 transition-colors duration-300">
                    <i class="fa fa-bolt text-2xl text-secondary glow"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">Lightning Fast</h3>
                <p class="opacity-75">Optimized for speed with minimal load times, ensuring your visitors stay engaged
                    and impressed.</p>
            </div>

            <!-- 特性卡片 3 -->
            <div class="bg-dark/50 backdrop-blur-sm p-8 rounded-2xl border border-primary/20 hover:border-primary/40 transition-all duration-300 transform hover:-translate-y-2 group">
                <div class="w-14 h-14 rounded-xl bg-accent/20 flex items-center justify-center mb-6 group-hover:bg-accent/30 transition-colors duration-300">
                    <i class="fa fa-mobile text-2xl text-accent glow"></i>
                </div>
                <h3 class="text-xl font-bold mb-3">Fully Responsive</h3>
                <p class="opacity-75">Looks perfect on any device, from mobile phones to large desktop monitors with
                    seamless adaptability.</p>
            </div>
        </div>
    </div>
</section>

<!-- 展示区域 -->
<section class="py-20 bg-gradient-to-b from-dark to-primary/10">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div class="order-2 lg:order-1">
                <h2 class="text-3xl md:text-4xl font-bold mb-6">
                    <span class="text-gradient bg-gradient-to-r from-secondary to-accent">Smooth</span>
                    <span class="block">Interactive Elements</span>
                </h2>
                <p class="text-lg opacity-80 mb-8">
                    Every element on this website is carefully crafted with interactive effects that respond to your
                    touch and movement, creating an immersive experience.
                </p>
                <ul class="space-y-4 mb-8">
                    <li class="flex items-start">
                        <div class="w-6 h-6 rounded-full bg-secondary/20 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
                            <i class="fa fa-check text-xs text-secondary"></i>
                        </div>
                        <span>Subtle hover animations on all clickable elements</span>
                    </li>
                    <li class="flex items-start">
                        <div class="w-6 h-6 rounded-full bg-secondary/20 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
                            <i class="fa fa-check text-xs text-secondary"></i>
                        </div>
                        <span>Smooth scrolling and transitions between sections</span>
                    </li>
                    <li class="flex items-start">
                        <div class="w-6 h-6 rounded-full bg-secondary/20 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
                            <i class="fa fa-check text-xs text-secondary"></i>
                        </div>
                        <span>Dynamic visual feedback for user actions</span>
                    </li>
                </ul>
                <button class="px-8 py-3 bg-gradient-to-r from-secondary to-accent rounded-full font-semibold hover:shadow-lg hover:shadow-secondary/20 transition-all duration-300 transform hover:-translate-y-1">
                    <i class="fa fa-eye mr-2"></i>See It In Action
                </button>
            </div>
            <div class="order-1 lg:order-2 relative">
                <div class="relative z-10 rounded-2xl overflow-hidden border-4 border-primary/20 shadow-2xl shadow-primary/10 transform hover:scale-[1.02] transition-transform duration-500">
                    <img src="https://picsum.photos/id/1/800/600" alt="Example interface with gradient design"
                         class="w-full h-auto">
                    <div class="absolute inset-0 bg-gradient-to-t from-dark/70 to-transparent flex items-end">
                        <div class="p-6">
                            <div class="flex space-x-2 mb-3">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <p class="text-sm md:text-base opacity-90">Beautifully crafted interface with stunning
                                visual effects</p>
                        </div>
                    </div>
                </div>
                <!-- 装饰元素 -->
                <div class="absolute top-10 -right-5 w-64 h-64 bg-accent/20 rounded-full blur-3xl -z-10"></div>
                <div class="absolute -bottom-10 -left-5 w-40 h-40 bg-primary/30 rounded-full blur-3xl -z-10"></div>
            </div>
        </div>
    </div>
</section>

<!-- 调用行动区域 -->
<section class="py-24 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-r from-primary/30 to-secondary/30"></div>
    <div class="absolute inset-0 bg-mesh"></div>
    <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl md:text-5xl font-bold mb-8">Ready to <span
                    class="text-gradient bg-gradient-to-r from-accent to-secondary">Create</span> Something Amazing?
            </h2>
            <p class="text-xl opacity-90 mb-10 max-w-2xl mx-auto">Join thousands of developers and designers who have
                already fallen in love with this cool theme.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button class="px-10 py-4 bg-gradient-to-r from-accent to-secondary rounded-full font-semibold text-lg hover:shadow-lg hover:shadow-accent/30 transition-all duration-300 transform hover:-translate-y-1">
                    <i class="fa fa-download mr-2"></i>Get Started Now
                </button>
                <button class="px-10 py-4 bg-transparent border-2 border-light/50 rounded-full font-semibold text-lg hover:border-light transition-all duration-300">
                    <i class="fa fa-github mr-2"></i>View on GitHub
                </button>
            </div>
        </div>
    </div>
    <!-- 装饰元素 -->
    <div class="absolute -bottom-32 -left-32 w-96 h-96 bg-primary/40 rounded-full blur-3xl"></div>
    <div class="absolute -top-32 -right-32 w-96 h-96 bg-secondary/40 rounded-full blur-3xl"></div>
</section>

<!-- 页脚 -->
<footer class="py-12 bg-dark border-t border-primary/20">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
            <div class="md:col-span-1">
                <div class="text-2xl font-bold text-gradient bg-gradient-to-r from-primary to-secondary mb-4">
                    <i class="fa fa-bolt mr-2"></i>Cool<span class="text-accent">Theme</span>
                </div>
                <p class="opacity-75 mb-6">A modern website template with stunning visual effects and smooth
                    animations.</p>
                <div class="flex space-x-4">
                    <a href="#"
                       class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center hover:bg-primary/30 transition-colors duration-300">
                        <i class="fa fa-twitter text-primary"></i>
                    </a>
                    <a href="#"
                       class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center hover:bg-primary/30 transition-colors duration-300">
                        <i class="fa fa-instagram text-primary"></i>
                    </a>
                    <a href="#"
                       class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center hover:bg-primary/30 transition-colors duration-300">
                        <i class="fa fa-github text-primary"></i>
                    </a>
                </div>
            </div>
            <div>
                <h3 class="text-lg font-bold mb-4">Quick Links</h3>
                <ul class="space-y-2">
                    <li><a href="#"
                           class="opacity-75 hover:opacity-100 hover:text-secondary transition-colors duration-300">Home</a>
                    </li>
                    <li><a href="#"
                           class="opacity-75 hover:opacity-100 hover:text-secondary transition-colors duration-300">Features</a>
                    </li>
                    <li><a href="#"
                           class="opacity-75 hover:opacity-100 hover:text-secondary transition-colors duration-300">Gallery</a>
                    </li>
                    <li><a href="#"
                           class="opacity-75 hover:opacity-100 hover:text-secondary transition-colors duration-300">Contact</a>
                    </li>
                </ul>
            </div>
            <div>
                <h3 class="text-lg font-bold mb-4">Resources</h3>
                <ul class="space-y-2">
                    <li><a href="#"
                           class="opacity-75 hover:opacity-100 hover:text-secondary transition-colors duration-300">Documentation</a>
                    </li>
                    <li><a href="#"
                           class="opacity-75 hover:opacity-100 hover:text-secondary transition-colors duration-300">Tutorials</a>
                    </li>
                    <li><a href="#"
                           class="opacity-75 hover:opacity-100 hover:text-secondary transition-colors duration-300">Support</a>
                    </li>
                    <li><a href="#"
                           class="opacity-75 hover:opacity-100 hover:text-secondary transition-colors duration-300">Blog</a>
                    </li>
                </ul>
            </div>
            <div>
                <h3 class="text-lg font-bold mb-4">Newsletter</h3>
                <p class="opacity-75 mb-4">Subscribe to our newsletter to get the latest updates.</p>
                <form class="flex">
                    <input type="email" placeholder="Your email"
                           class="px-4 py-2 bg-dark/80 border border-primary/30 rounded-l-lg focus:outline-none focus:border-secondary w-full">
                    <button type="submit"
                            class="px-4 py-2 bg-secondary text-dark font-medium rounded-r-lg hover:bg-accent transition-colors duration-300">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </div>
        <div class="border-t border-primary/10 pt-8 text-center opacity-60 text-sm">
            <p>&copy; 2025 CoolTheme. All rights reserved.</p>
        </div>
    </div>
</footer>

<script>
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });

    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
        const nav = document.querySelector('nav');
        if (window.scrollY > 50) {
            nav.classList.add('py-2');
            nav.classList.remove('py-3');
            nav.classList.add('shadow-lg');
        } else {
            nav.classList.add('py-3');
            nav.classList.remove('py-2');
            nav.classList.remove('shadow-lg');
        }
    });

    // 添加一些随机的粒子效果
    document.addEventListener('DOMContentLoaded', function() {
        const body = document.body;
        const particleCount = 30;

        for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            const size = Math.random() * 5 + 1;

            particle.style.position = 'fixed';
            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
            particle.style.background = i % 3 === 0 ? '#6C2BD9' : i % 3 === 1 ? '#00CFFD' : '#FF0080';
            particle.style.borderRadius = '50%';
            particle.style.opacity = Math.random() * 0.5 + 0.1;
            particle.style.zIndex = '0';
            particle.style.top = `${Math.random() * 100}vh`;
            particle.style.left = `${Math.random() * 100}vw`;
            particle.style.animation = `float ${Math.random() * 10 + 10}s linear infinite`;

            body.appendChild(particle);
        }

        // 添加浮动动画样式
        const style = document.createElement('style');
        style.textContent = `
            @keyframes float {
                0% {
                    transform: translate(0, 0) rotate(0deg);
                }
                33% {
                    transform: translate(${Math.random() * 20 - 10}px, ${Math.random() * 20 - 10}px) rotate(120deg);
                }
                66% {
                    transform: translate(${Math.random() * 20 - 10}px, ${Math.random() * 20 - 10}px) rotate(240deg);
                }
                100% {
                    transform: translate(0, 0) rotate(360deg);
                }
            }
        `;
        document.head.appendChild(style);
    });
</script>
</body>
</html>
